<template>
    <MaskView :visible="visible">
        <div class="success-dialog-view">
            <MmvImage src="06开始答题-单选弹窗页/错误弹窗/回答错误.png"></MmvImage>
            <div class="success-label">{{ answer }}</div>
            <ScaleButton v-show="!isLast" class="next-btn" src="06开始答题-单选弹窗页/错误弹窗/按钮.png" @MmvTap="handleClose"></ScaleButton>
            <ScaleButton v-show="isLast" class="next-btn" src="08开始答题-多选弹窗页/最后一题-按钮.png" @MmvTap="handleOver"></ScaleButton>
        </div>
    </MaskView>
</template>

<script>
export default {
    name: 'SuccessDialog',
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
        answer: {
            type: String,
            default: 'ABCD',
        },
    },
    computed: {
        isLast() {
            return this.$store.getters['QuestionBank/isLast'];
        },
    },
    methods: {
        handleClose() {
            this.$emit('update:visible', false);
            this.$emit('close');
        },
        handleOver() {
            this.$emit('over');
        },
    },
};
</script>

<style lang="scss" scoped>
.success-dialog-view {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.success-label {
    position: absolute;
    top: 51vw;
    left: 50vw;
    font-family: "黑体";
    font-weight: bolder;
    color: $main;
}
.next-btn {
    position: absolute;
    top: 65vw;
    z-index: 1;
}
</style>
